<template>
	<view>
		<uni-grid :column="1" :showBorder="false" :square="false">
			<uni-grid-item>
				<view class=" grid-item-box card1" v-if="user.type==0">
					<view>
						<view class="top">
							<image src="../../static/images/images/d.png"></image>
						</view>

					</view>
				</view>
				<view class=" grid-item-box card1" style="color: aliceblue;background-color: #152cff;"
					v-if="user.type==1" @tap="askVideo()">
					<view>
						<h1>致电第一位志愿者</h1>
					</view>
				</view>
			</uni-grid-item>
			<uni-grid-item v-if="user.type==0">
				<view class=" grid-item-box card2">
					志愿者：111 盲人：123
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class=" grid-item-box card2" v-if="user.type==0">
					<text class="text">{{user.userName}}</text>
					<text class="text2">注册于 {{user.createTime}}</text>
					<!-- <label class="text2"><text>无障碍模式: &nbsp;</text>
						<switch @change="switch2Change" />
					</label> -->
				</view>
				<view class=" grid-item-box card2" v-if="user.type==1" @click="change">
					<h1 v-if="user.isYuyin == 0">开启无障碍模式</h1>
					<h1 v-if="user.isYuyin == 1">关闭无障碍模式</h1>
				</view>
			</uni-grid-item>
			<uni-grid-item v-if="user.type == 0">
				<view class=" grid-item-box card3" @click="douClick()">
					<text class="text">当有人需要您的帮助时，您将收到通知。</text>
				</view>
			</uni-grid-item>
			<uni-grid-item v-if="user.type == 1">
				<view class=" grid-item-box card4" @click="picAi">
					<view>
						<h1>图像识别</h1>
					</view>
				</view>
			</uni-grid-item>


		</uni-grid>

	</view>
</template>
<script>
	import config from '@/config'
	import store from '../../store/index.js';
	import {
		change
	} from '@/api/user.js';
	import {
		click
	} from '../../utils/click.js'
	import {
		CommandType
	} from "../../utils/CommadEnum.js"


	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.src =
		'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
	innerAudioContext.loop = true;
	innerAudioContext.onPlay(() => {
		console.log("播放背景音乐")
	})

	export default {
		data() {
			return {
				socket: null,
				socketUrl: config.wsUrl, //"ws:192.168.1.23:8888/ws",
				channelId: '',
				ask: false,
				context: null,
				localUId: '',
				remoteUId: '',
				touchNum: 0,
				user: '',
				type: 0,
			}
		},
		methods: {
			picAi() {
				click(() => {
					uni.navigateTo({
						url: "/pages/face/face"
					})
				}, '../../static/audio/tx.mp3')

			},
			change() {
				// let str = ''
				// if (this.user.isYuyin == 0) {
				// 	str = "开启无障碍模式"
				// } else {
				// 	str = "关闭无障碍模式"
				// }
				click(() => {
					change().then(res => {
						console.log(res)
						this.user.isYuyin = res.data
						uni.setStorageSync("userData", this.user)
					})
				}, "../../static/audio/gb.mp3")

			},
			switch2Change(e) {
				console.log(e.detail.value)
			},
			douClick() {

			},
			askVideo() {
				click(() => {
					this.socketSend(this.localUId, 3, null, null, null)
					this.join(0)
				}, '../../static/audio/zd.mp3')

			},
			chanel() {
				this.ask = false
			},
			randomFn(len, charSet) {
				charSet = charSet || '0123456789';
				let randomString = '';
				for (let i = 0; i < len; i++) {
					let randomPoz = Math.floor(Math.random() * charSet.length);
					randomString += charSet.substring(randomPoz, randomPoz + 1);
				}
				return randomString;
			},
			//跳转通话页面
			join(e) { //e  0:发起视频 1：接受视频  2:视频中
				console.log(e)
				uni.navigateTo({
					url: "../live/live" + "?liveStyle=" + e
				})
				innerAudioContext.play()
			},

			socketOnMessage: function(evt) {
				let command = JSON.parse(evt.data)
				switch (command.type) {
					case CommandType.ASK: //接收到通话请求
						console.log("接收到通话请求")
						this.remoteUId = command.localUId
						this.join(1)
						break;
					case CommandType.ANSWER:
						//开始视频
						console.log(command)
						if (command.channelId) {
							this.channelId = command.channelId
							console.log("开始视频")
							uni.$emit("beginLive", {
								channelId: command.channelId,
								localUId: this.localUId,
								liveStyle: command.msg
							})
						} else {
							console.log("有人先一步接听了")
							//无法视频
							uni.navigateBack({
								delta: 1
							})
							this.$modal.msg(e)
						}
					case CommandType.ANSWER_ASK:

					default:
						break;
				}
			},
			socketSend(name, type, to, msg, channelId) {
				this.socket.send({
					data: JSON.stringify({
						localUId: name,
						type: type,
						remoteUId: to,
						msg: msg,
						channelId: channelId
					}),
					success: () => {
						console.log("发送成功")
					},
					fai: () => {
						console.log("发送失败")
					}
				})
			},
			getInfo() {
				this.$store.dispatch('GetInfo').then(res => {
					this.user = res.user
					this.localUId = res.user.userId
					uni.setStorageSync("userData", res.user)
					console.log(res.user)
				})
			},

		},
		onReady() {
			this.socket = uni.connectSocket({
				url: this.socketUrl,
				success: () => {
					console.log("connect Success")
				}
			})
			this.socket.onMessage((evt) => {
				this.socketOnMessage(evt)
			})
			this.socket.onOpen(() => {
				//发送登录消息
				this.socketSend(this.localUId, 1, null, null, null)
			})
			this.socket.onClose(() => {
				// TODO 发送退出消息		
				this.socketSend(this.localUId, 1, null, null)
			})
		},

		onLoad() {
			this.getInfo()
			//this.localUId = this.randomFn(6)
			// const value = uni.getStorageSync("userData")
			// if (!value) {
			// 	uni.reLaunch({
			// 		url: "/pages/login/login"
			// 	})
			// }
			//this.localUId = value.id

			uni.$off("back")
			uni.$off("accept")
			uni.$off("stop")
			uni.$off("closeVideo")
			uni.$once("closeVideo", () => {
				console.log("closed")
			})
			uni.$on("stop", () => {
				innerAudioContext.stop()
				console.log("停止播放")
			})
			uni.$on("back", (e) => {
				uni.navigateBack({
					delta: 1
				})
				//this.$modal.msg(e)
				if (e) {
					this.socketSend(this.localUId, 5, null, null, this.channelId)
				}
			})
			uni.$on("accept", () => {
				this.socketSend(this.localUId, 4, this.remoteUId, null, null)
			})
		},
		mounted() {
			// const value = uni.getStorageSync("userData")
			// console.log(value)
			// this.type = value.type
			// this.localUId = value.userId
		}
	}
</script>
<style>
	.top {
		height: 250px;
		background-color: #fff;
	}

	.bottom {}

	.card1 {
		display: flex;
		align-items: center;
		flex-direction: column;
		background-color: #ffffff;
		line-height: 250px;
	}

	.card2 {
		background-color: #ffffff;
		line-height: 50px;
	}

	.card3 {
		background-color: #ffffff;
		line-height: 8px;
	}

	.card4 {
		background-color: #ffffff;
		line-height: 50px;
	}

	.text {
		color: #2d2d2d;
		line-height: 30px;
		font-size: 18px;
	}

	.text2 {
		color: #2d2d2d;
		line-height: 30px;
		font-size: 15px;
	}

	/* .card1 {
		width: 330px;
		margin: 0 auto;
		height: 400rpx;
		background-color: aliceblue;
		border-radius: 2%;
	}

	.card2 {
		width: 330px;
		margin: 20px auto;
		height: 200rpx;
		background-color: aliceblue;
		border-radius: 2%;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 20px;
		background-color: gainsboro;

	} */
	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
		border-radius: 5px;
		margin: 10px;
	}

	.join {
		margin-top: 40rpx;
		background-color: lightcoral;
		width: 330px;
		height: 200rpx;
		border-radius: 5%;
		font-size: 28rpx;
		font-weight: 600;
		text-align: center;
		line-height: 200rpx;
		color: rgba(255, 255, 255, 1);
	}
</style>